﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../static/before/js/echarts.min.js"></script>
 <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="http://cdn.zaixianke.com/china.js"></script>
    <script src="../static/before/js/jquery.min.js"></script>
    <title>商家数据分析</title>
     <link rel="stylesheet" href="../static/before/css/wodry.css">
    <link rel="stylesheet" href="../static/before/css/test33.css">
    <link rel="stylesheet" href="../static/before/css/public.css">

    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        });

        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        });
    </script>
</head>
<body>

<div class="main">
    <div class="header">
        <div class="header-left fl" id="time"></div>
        <div class="header-center fl">
            <div class="header-title">
                商家数据分析
            </div>
            <div class="header-img"></div>
        </div>
        <div class="header-right fl"></div>
        <div class="header-bottom fl"></div>

    </div>

    <div class="center">

        <div class="center-left fl">
            <div class="left-top rightTop border">
                <div class="title">基本数据</div>
                <div class="top-list">
                    <p>踩着缓慢的步伐，不急不徐，感受大风景里的小风景。</p>
                    <ul>
                        <li>旅游收入：6642.16亿元</li>
                        <li>旅行社(个)：703</li>
                        <li>旅行社职工：5833</li>
                        <li>客房数(万间)：12.94</li>
                        <li>床位数(万张)：20.31</li>
                        <li>餐费收入(亿元)：41.77</li>
                    </ul>
                </div>

            </div>
            <div class="left-cen rightTop border">
                <div class="title">博物馆、纪念馆数量</div>
                <div id="ceshi" style="width: 350px; height: 200px;"></div>

            </div>
            <div class="left-bottom rightTop border">
                <div class="title">特色小吃排行</div>
                  <div class="echart wenzi">
                                    <div class="gun">
                                    <span>排名</span>
                                    <span>小吃名称</span>
                                    <span>点赞数量</span>
                                </div>
                                    <div id="FontScroll" class="myscroll">
                                         <ul>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>1</b>
                                                    </span>
                                                    <span>丝娃娃</span>
                                                    <span>5994</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>2</b>
                                                    </span>
                                                    <span>状元蹄</span>
                                                    <span>3061</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>3</b>
                                                    </span>
                                                    <span>肠旺面</span>
                                                    <span>2819</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>4</b>
                                                    </span>
                                                    <span>酸汤鱼</span>
                                                    <span>2453</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>5</b>
                                                    </span>
                                                    <span>杠子面</span>
                                                    <span>1961</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>6</b>
                                                    </span>
                                                    <span>兴义羊肉粉</span>
                                                    <span>1929</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>7</b>
                                                    </span>
                                                    <span>清镇黄粑</span>
                                                    <span>1412</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>8</b>
                                                    </span>
                                                    <span>铜仁社饭</span>
                                                    <span>1177</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>9</b>
                                                    </span>
                                                    <span>花溪牛肉粉</span>
                                                    <span>1162</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>10</b>
                                                    </span>
                                                    <span>镇宁波波糖</span>
                                                    <span>1073</span>

                                                </div>
                                            </li>
                                        </ul>

                                    </div>
                                </div>
            </div>
        </div>

        <div class="center-cen fl">
             <div class="cen-top rightTop border">
                  <div class="title">2017-2019年星级酒店数量</div>
                  <div id="main2" style="width: 750px; height: 230px;"></div>
            </div>

            <div class="cen-bottom rightTop border">
                <div id="main1" style="width: 700px; height: 225px;"></div>
            </div>
            <div class="cen-bottom2 rightTop border">
                 <div class="title">游客不同支付方式使用频率占比情况</div>
                 <div id="main3" style="width: 700px; height: 225px;"></div>
            </div>


        </div>

        <div class="center-right fr">
            <div class="right-top rightTop border">
                 <div class="title">旅店企业近五年数据</div>
                 <div id="meet" style="width: 350px; height: 200px;"></div>
            </div>
            <div class="right-cen border">
                <div class="bottom-b">
                    <div class="title">餐饮企业近五年数据</div>
                    <div id="canyin" style="width: 350px; height: 230px;"></div>

                </div>

            </div>
            <div class="right-bottom rightTop border">
                <div class="title">十大美食街</div>
                  <div class="echart wenzi">
                                    <div class="gun">
                                    <span>排名</span>
                                    <span>美食街名称</span>
                                    <span>点赞人数</span>
                                </div>
                                    <div id="FontScroll" class="myscroll">
                                         <ul>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>1</b>
                                                    </span>
                                                    <span>贵阳二七路美食街</span>
                                                    <span>10700</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>2</b>
                                                    </span>
                                                    <span>贵阳青云路夜市街</span>
                                                    <span>9000</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>3</b>
                                                    </span>
                                                    <span>贵阳合群路小吃街</span>
                                                    <span>6134</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>4</b>
                                                    </span>
                                                    <span>贵阳新华路美食街</span>
                                                    <span>5833</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>5</b>
                                                    </span>
                                                    <span>贵阳飞山街</span>
                                                    <span>5398</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>6</b>
                                                    </span>
                                                    <span>遵义捞沙巷美食街</span>
                                                    <span>5035</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>7</b>
                                                    </span>
                                                    <span>兴义夜市小吃街</span>
                                                    <span>4766</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>8</b>
                                                    </span>
                                                    <span>安顺好吃街</span>
                                                    <span>3099</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>9</b>
                                                    </span>
                                                    <span>贵阳陕西路夜市街</span>
                                                    <span>2532</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>10</b>
                                                    </span>
                                                    <span>贵阳博爱路夜市街</span>
                                                    <span>1900</span>

                                                </div>
                                            </li>
                                        </ul>

                                    </div>
                                </div>

            </div>
        </div>
    </div>


</div>

<script>
    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '近十年景区周边服务营业额',
        textStyle: {
                fontSize: 14,//字体大小
                color: '#ffffff'//字体颜色
            },
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['住宿总收入额', '餐饮总收入额', '旅游总收入额'],
        textStyle: {
                fontSize: 12,//字体大小
                color: '#cc11aa'//字体颜色
            },
      },
      grid: {
        left: '5%',
        right: '6%',
        bottom: '5%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        name:'年份',
        type: 'category',
        boundaryGap: false,
        data: ['2021','2020', '2019', '2018', '2017', '2016', '2015', '2014','2013','2012'],
        axisLine:{
                      lineStyle:{
                      color:'#ffffff',
                },
            },
      },
      yAxis: {
        name:'亿元',
        type: 'value',
        axisLine:{
                      lineStyle:{
                      color:'#ffffff',
                },
            },
      },
      series: [
        {
          name: '住宿总收入额',
          type: 'line',
          stack: 'Total',
          data: [75.66,73.63,79.71,73.43,68.7,60.59,50.83,46.7,41.99,35.88]
        },
        {
          name: '餐饮总收入额',
          type: 'line',
          stack: 'Total',
          data: [48.99,46.92,45.95,41.89,36.84,31.65,23.67,22.7,21.12,19.02]
        },
        {
          name: '旅游总收入额',
          type: 'line',
          stack: 'Total',
          data: [66.43,57.85,123.19,94.72,71.17,50.28,35.12,28.96,23.71,18.60]
        },
      ]
    };

    option && myChart.setOption(option);
</script>

<script>
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      legend: {
         orient: 'horizontal',
        left: 'center',
        textStyle: {
            fontSize: 12,//字体大小
            color: '#ffffff'//字体颜色
        },
      },
      tooltip: {},
      dataset: {
        source: [
          ['product', '2017', '2018', '2019'],
          ['五星级', 6, 6, 6],
          ['四星级', 58, 61, 66],
          ['三星级', 95, 96, 97],
          ['二星级', 65, 54, 52],
            ['一星级', 8, 4, 5],
        ]
      },
      xAxis: { type: 'category' ,
      axisLine:{
                  lineStyle:{
                  color:'#ffffff',
            },
        }
      },
      yAxis: {
          axisLine:{
                  lineStyle:{
                  color:'#ffffff',
            },
        }
      },
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    };

    option && myChart.setOption(option);
</script>

<script>
var chartDom = document.getElementById('main3');
var myChart = echarts.init(chartDom, '0bc4e9');
var option;

option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        textStyle: {
            fontSize: 12,//字体大小
            color: '#ffffff'//字体颜色
        },
    },
    series: [
        {
            name: '支付方式',
            type: 'pie',
            radius: '65%',
            label : {
        　　　　normal : {
        　　　　　　formatter: '{b}:({d}%)',
        　　　　　　textStyle : {
        　　　　　　　　fontWeight : 'normal',
        　　　　　　　　fontSize : 12,
        　　　　　　}
        　　　　}
        　　},
            data: [
                {value: 1987, name: '微信'},
                {value: 1838, name: '支付宝'},
                {value: 652, name: '刷储蓄卡'},
                {value: 910, name: '刷信用卡'},
                {value: 997, name: '现金'},
                {value: 320, name: '刷脸支付'},
            ],
            color:["#FEE449", "#0000ff", "#00FFA8","#aa11cc","#F76F01","#cccccc"],
            emphasis: {
                itemStyle: {
                    shadowBlur: 20,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
option && myChart.setOption(option);
</script>
<script>
    var chartDom = document.getElementById('canyin');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
            left: 'right',
            textStyle: {
                fontSize: 12,//字体大小
                color: '#ffffff'//字体颜色
            },
      },
      series: [
        {
          name: '餐饮数量',
          type: 'pie',
          radius: ['20%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
            normal : {
        　　　　　　formatter: '{b}:({d}%)',
        　　　　　　textStyle : {
        　　　　　　　　fontWeight : 'normal',
        　　　　　　　　fontSize : 12,
        　　　　　　}
        　　　　}
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '16',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 645, name: '2020年' },
                { value: 607, name: '2019年' },
                { value: 611, name: '2018年' },
                { value: 603, name: '2017年' },
                { value: 511, name: '2016年' }
          ],
          color: ["#FEE449", "#0000ff", "#00FFA8","#aa11cc","#F76F01"],
        }
      ]
    };
    option && myChart.setOption(option);
</script>

<script>
    var chartDom = document.getElementById('meet');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        textStyle: {
            fontSize: 12,//字体大小
            color: '#ffffff'//字体颜色
        },
      },
      series: [
        {
          name: '旅店企业（个）',
          type: 'pie',
          radius: '60%',
          label: {
            normal : {
        　　　　　　formatter: '{b}:({d}%)',
        　　　　　　textStyle : {
        　　　　　　　　fontWeight : 'normal',
        　　　　　　　　fontSize : 12,
        　　　　　　}
        　　　　}
          },
          data: [
            { value: 808, name: '2020年' },
            { value: 776, name: '2019年' },
            { value: 704, name: '2018年' },
            { value: 642, name: '2017年' },
            { value: 573, name: '2016年' }
          ],
          color: ["#FEE449", "#0000ff", "#00FFA8","#aa11cc","#F76F01"],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
  myChart.setOption(option);
</script>


<script src="../static/before/js/jquery.min.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="../static/before/js/wodry.min.js"></script>
<script src="../static/before/js/fontscroll.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="http://cdn.zaixianke.com/china.js"></script>
<!--<script src="js/mymap.js"></script>-->
<script>
    var chartDom = document.getElementById('ceshi');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
            orient: 'horizontal',
            left: 'center',
            textStyle: {
                fontSize: 12,//字体大小
                color: '#ffffff'//字体颜色
            },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
         axisLine:{
            lineStyle:{
                color:'#FFFAFA',
            },
        },
      },
      yAxis: {
        type: 'category',
        data: ['2016', '2017', '2018', '2019', '2020'],
         axisLine:{
            lineStyle:{
                color:'#FFFAFA',
            },
        },
      },
      series: [
        {
          name: '数量',
          type: 'bar',
          data: [73, 84, 84, 91, 92],
          color:"#22dd11"
        },
      ]
    };

option && myChart.setOption(option);


    //顶部时间
    function getTime(){
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var nowTime;

        nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };
    function fillZero(str){
        var realNum;
        if(str<10){
            realNum    = '0'+str;
        }else{
            realNum    = str;
        }
        return realNum;
    }
    setInterval(getTime,1000);

</script>

</body>
</html>